<template>
  <div style="position: relative;" :style="getFlowFormStyle">
    <OnlineQueryForm v-if="Number.parseInt(formType) === SysOnlineFormType.QUERY" ref="form" :key="formKey" :operation-type="operationType" :form-id="formId" :params="params" @ready="onFormReady" />
    <OnlineEditForm v-if="Number.parseInt(formType) === SysOnlineFormType.FORM" ref="form" :key="formKey" :save-on-close="saveOnClose" :form-id="formId" :params="params" :operation-type="operationType" :row-data="rowData" :flow-data="flowData" @close="onClose" @ready="onFormReady" />
    <WorkflowForm v-if="Number.parseInt(formType) === SysOnlineFormType.FLOW" ref="form" :key="formKey" :form-id="formId" :read-only="readOnly" @ready="onFormReady" />
    <WorkOrderForm v-if="Number.parseInt(formType) === SysOnlineFormType.WORK_ORDER" ref="form" :key="formKey" :entry-id="entryId" :form-id="formId" :is-preview="isPreview" :read-only="readOnly" @ready="onFormReady" />
    <label v-if="closeVisible === '1'" class="page-close-box">
      <el-button type="text" icon="el-icon-close" @click="onClose(true)" />
    </label>
  </div>
</template>

<script>
import '@/staticDict/flowStaticDict.js'
import OnlineQueryForm from '@/views/onlineForm/formRender/onlineQueryForm.vue'
import OnlineEditForm from '@/views/onlineForm/formRender/onlineEditForm.vue'
import WorkflowForm from '@/views/onlineForm/formRender/workflowForm.vue'
import WorkOrderForm from '@/views/onlineForm/formRender/onlineWorkOrder.vue'
import { SysCustomWidgetOperationType } from '@/staticDict/onlineStaticDict.js'
export default {
  components: {
    OnlineQueryForm,
    OnlineEditForm,
    WorkflowForm,
    WorkOrderForm
  },
  props: {
    formId: {
      type: String,
      required: true
    },
    formType: {
      type: [Number, String],
      required: true
    },
    closeVisible: {
      type: String,
      default: '0'
    },
    saveOnClose: {
      type: String,
      default: '1'
    },
    operationType: {
      type: [Number, String],
      default: SysCustomWidgetOperationType.ADD
    },
    params: {
      type: Object,
      default: () => {}
    },
    isPreview: {
      type: Boolean,
      default: false
    },
    rowData: {
      type: Object,
      default: () => {}
    },
    flowData: {
      type: Object,
      default: () => {}
    },
    readOnly: {
      type: [String, Boolean],
      default: false
    },
    entryId: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      formKey: 0,
      formConfig: {}
    }
  },
  computed: {
    getFlowFormStyle() {
      if (Number.parseInt(this.formType) === this.SysOnlineFormType.FLOW && this.formConfig) {
        return {
          width: (this.formConfig.width != null && this.formConfig.width !== '') ? this.formConfig.width + 'px' : '100%'
        }
      } else {
        return undefined
      }
    }
  },
  watch: {
    formId: {
      handler(newValue) {
        this.formKey++
      }
    }
  },
  created() {
  },
  methods: {
    onClose(isSuccess, data) {
      if (this.observer != null) {
        this.observer.cancel(isSuccess, data)
      } else {
        this.$router.go(-1)
      }
    },
    setFormData(formData, setFormData, flowData) {
      if (this.$refs.form && this.$refs.form.setFormData) this.$refs.form.setFormData(formData, setFormData, flowData)
    },
    getVariableData(variableList) {
      let funGetVariableData = null
      if (Array.isArray(this.$refs.form) && this.$refs.form.length > 0) {
        funGetVariableData = this.$refs.form[0].getVariableData
      } else {
        if (this.$refs.form != null) funGetVariableData = this.$refs.form.getVariableData
      }
      if (typeof funGetVariableData === 'function') {
        return funGetVariableData(variableList)
      }
    },
    getFormData() {
      let funGetFormData = null
      if (Array.isArray(this.$refs.form) && this.$refs.form.length > 0) {
        funGetFormData = this.$refs.form[0].getFormData
      } else {
        if (this.$refs.form != null) funGetFormData = this.$refs.form.getFormData
      }

      if (typeof funGetFormData === 'function') {
        return funGetFormData()
      }
    },
    onFormReady() {
      this.$emit('ready')
    }
  },
  provide() {
    return {
      preview: () => this.isPreview
    }
  }
}
</script>

<style>
</style>
